<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <div id="app">
        <!-- <div id="demo" class="one" title="hello" ></div> -->

        <!-- 动态绑定属性 => 属性节点  html属性 => 将data中的数据作为html属性的属性值 -->
        <div :id="id" :class="className" :title="title" ASD="asd" >11111</div>

        <!-- 了解 -->
        <!-- v-bind的指令值也可以是一个对象 => 对象的键名就是需要绑定属性的属性名,键值就是需要绑定属性的属性值 -->
        <div v-bind="{id:id,class:className,title:title}">2222</div>

        <!-- 指令的参数定死了 -> id -->
        <div :id="id"></div>
        
        <!-- 从 2.6.0 开始，可以用方括号括起来的 JavaScript 表达式作为一个指令的参数： -->
        <!-- v-bind的动态参数  => v-bind绑定的属性名也可以使用data中的数据,可以动态切换 -->
        <div :[attrname]="title" @click="attrname='class'" >33333</div>
    </div>
</body>
<script>
    var vm = new Vue({
        data: {
            id:"demo",
            className:"one",
            title:"hello",
            attrname:"id",
        },
    })

    vm.$mount("#app");









</script>

</html>